<template>
  <div :class="{outDiv:true,scroll:isIp,hidden:visible,shortScreen:isShortScreen}">
    <div class="topDiv">
      <div class="code">
        <span v-if="details.category == '0'">
          <img :src="zhuanjiaImg" class="fl" />
          <span class="fl type">{{details.category_str}}</span>
        </span>
        <span v-if="details.category == '1'">
          <img :src="zhuankeImg" class="fl" />
          <span class="fl type">{{details.category_str}}</span>
        </span>
        <span v-if="details.category == '2'">
          <img :src="tuanduiImg" class="fl" />
          <span class="fl type">{{details.category_str}}</span>
        </span>
        <span v-if="details.category == '3'">
          <img :src="tuwenImg" class="fl" />
          <span class="fl type">{{details.category_str}}</span>
        </span>
        <span v-if="details.category == '4'">
          <img :src="yinpingImg" class="fl" />
          <span class="fl type">{{details.category_str}}</span>
        </span>
        <span v-if="details.category == '5'">
          <img :src="medicalImg" class="fl" />
          <span class="fl type">{{details.category_str}}</span>
        </span>
        <span class="fr">
          <span style="color:#999">预约编号：</span>
          {{details.apt_id}}
        </span>
      </div>
      <div class="init" v-if="details.status !== '03' && details.status !== '05'" >
        <div class="initTop" >
          <span class="name">{{details.patient_name}}</span>
          <span class="fr">
            {{details.sex}}
            <span class="xiegang">/</span>
            <span v-if="details.regular_age">{{details.regular_age}}岁</span>
          </span>
        </div>
        <!-- 正常显示个人信息 + 就诊信息 -->
        <div class="areaDiv" v-if="details.status !== '03'">
          <div class="lineTitle">个人信息</div>
          <div>
            <span class="line">就诊卡号：</span>
            <span v-if="details.card_no">{{details.card_no}}</span>
            <span v-else>无</span>
          </div>
          <div>
            <span class="line">身份证号：</span>
            <span v-if="details.cert_id">{{details.cert_id}}</span>
          </div>
          <div>
            <span class="line">手机号码：</span>
            <span v-if="details.phone">{{details.phone}}</span>
          </div>
        </div>
        <div class="areaDiv" v-if="details.status !== '03'">
          <div class="lineTitle">预约信息</div>
          <div>
            <span class="line">预约时间：</span>
            <span>{{details.yuyueTime}}</span>
            <!-- <span class="xiegang" v-if="details.period_name || details.apt_seq">/</span> -->
            <!-- <span v-if="details.period_name">{{details.period_name}}</span> -->
            <!-- <span v-if="details.apt_seq">{{details.apt_seq}}号</span> -->
          </div>
          <!-- 团队门诊，专家专科显示就诊时间 -->
          <div v-if="(details.category == '0' || details.category == '1' || details.category == '2' ||details.category == '5')">
            <!-- &&(details.status !== '00' && details.status !== '01'&&details.status !='06') -->
            <span class="line">就诊时间：</span>
            <span>{{details.apt_begin_time}}</span>-<span>{{details.apt_end_time}}</span>
            <!--time_travel <span class="xiegang" v-if="details.period_name || details.apt_seq">/</span> -->
            <!-- <span v-if="details.period_name">{{details.period_name}}</span> -->
            <!-- <span v-if="details.apt_seq">{{details.apt_seq}}号</span> -->
          </div>
          <!-- 图片音频没接诊不显示就诊时间 -->
          <div v-if="details.category == '3' || details.category == '4'">
            <div>
              <span class="line">就诊时间：</span>
              <span v-if="details.status !== '00' && details.status !== '01'&&details.status !='06'" >{{details.jiuzhenTime}}</span>
              <!-- <span class="xiegang" v-if="details.period_name || details.apt_seq">/</span>
              <span v-if="details.period_name">{{details.period_name}}</span>
              <span v-if="details.apt_seq">{{details.apt_seq}}号</span>-->
            </div>
          </div>
          <div>
            <span class="line">申请科室：</span>
            <span>{{details.dept_name}}</span>
          </div>
          <div>
            <span class="line" v-if="details.doctor_name">就诊医生：</span>
            <span v-if="details.doctor_name">{{details.doctor_name}}
              <span class="xiegang" v-if="details.doctor_name!== ' '">/</span>
              <span v-else>-</span> {{details.positional_title}}
            </span>
          </div>
          <div>
            <span class="line">挂号费：</span>
            <span class="monry">¥ {{details.pay_value}}</span>
          </div>
          <div v-if="details.status === '00'||details.status =='06'">
            <span class="line">支付时间：</span>
            <span class="monry">剩余{{details.countDown}}</span>
          </div>
        </div>
        <!-- 图文、音频    提示-->
        <div>
          <!-- 未验证 待就诊提示 -->
          <div v-if="details.status === '01'&& ( details.category=='3' ||  details.category=='4' || details.category === '5')" class="btmTips">
            <p >  医生将在24小时内接诊并回复,自医生接诊开始计时,交流时限为
              {{details.time_type}}
              小时,超时系统将自动结束对话。
            </p>
          </div>
          <div v-if="details.status === '04'" class="btmTips">
            <p>未赴约</p>
            <p>未在规定时间内赴约就诊，已逾期失效</p>
          </div>
          <!-- 医生未接诊提示 -->
          <div v-if="details.status === '08'" class="btmTips">
            <p>医生繁忙，未能接诊</p>
          </div>
          <!-- 过期未支付提示 -->
          <div v-if="details.status === '20'" class="btmTips">
            <p>逾期支付</p>
            <p>订单超过30分钟未支付，交易已关闭！</p>
          </div>
          <!-- 患者主动撤销提示 -->
          <div v-if="details.status === '30'" class="btmTips">
            <p>患者主动取消</p>
            <p>您已于{{details.quxiaoTime}} 取消预约</p>
          </div>
            <!-- 违约 -->
          <div v-if="details.status === '34'" class="btmTips">
            <p>违约</p>
            <p>{{details.breach_contract_reason}} </p>
          </div>
          <!-- 退款中提示 -->
          <div v-if="details.status === '31'" class="btmTips" >
            <p>患者申请退款</p>
            <p class="p2">您已于{{details.tuikuanTime}}发起退款申请,工作人员审核中请等待！</p>
            <div class="p3">
              退款原因
              <div class="fontGray">{{details.cancel_reason}}</div>
            </div>
          </div>
          <!-- 退款成功提示 -->
          <div v-if="details.status === '32'" class="btmTips">
            <p>退费成功</p>
            <p class="p2">您已于{{details.tuikuanTime}}申请退款,相关款项将在5-10个工作日内沿原账户路径退还到您的账户,请注意查收!</p>
            <div class="p3">
              退款原因
              <div class="fontGray">{{details.cancel_reason}}</div>
            </div>
          </div>
          <div v-if=" (details.category === '1' || details.category === '2') &&details.status == '01'&& details.doctor_id" class="btmTips">
            <p>
              请您进入云诊间点击"开始排队",就诊人无法完成人脸验证时,可选择注册人进行人脸验证,请确保信息真实可靠,否则自行承担法律责任!
            </p>
          </div>
          <!-- <div v-if="(details.category === '3' || details.category === '4') && details.status == '01'" class="btmTips">
            <p>
              医生将在24小时内接诊并回复,自医生接诊开始计时,交流时限为24小时,超时系统将自动结束对话。
            </p>
          </div> -->
          <!-- 退款失败提示 -->
          <div v-if="details.status === '33'" class="btmTips">
            <p>退费失败</p>
            <div class="p5">
              <span>退款审核：</span>
              <div>{{details.approve_info}}</div>
            </div>
            <div class="p4">
              退款原因
              <div class="fontGray">{{details.cancel_reason}}</div>
            </div>
          </div>
          <div
            :class="{bottomDiv: true, ipxPage: ifIphonex}"
            v-if=" ( details.category === '1' || details.category === '2') && showBtm && details.status == '01'&& details.doctor_id"
         >
          <!--  专科诊断前 -->
            <div class="twoBtn">
                <div>
                  <span @click="goRoom">进入云诊间</span>
                </div>
                <div @click="refundMoney">申请退款</div>
            </div>
          </div>
          <div
            :class="{bottomDiv: true, ipxPage: ifIphonex}"
            v-if="(details.category == '3' || details.category === '4' || details.category === '5')&&(details.status == '01'&&!ifIphonex)"
            >
              <span class="recode" @click="refundMoney">申请退款</span>
              <!-- <span class="recode" @click="queryList">查看预约记录</span> -->
              <img :src="btnBgImg" />
          </div>
        </div>
      </div>
      <!-- 医生反馈信息 -->
      <div class="feedback" v-if="details.reply_content!=null && details.reply_content.length!==0 && details.reply_content!==' ' ">
          <span>医生回复</span>
          <p>{{details.reply_content}}</p>
          <!-- <p>您的病情已得到有效控制,请继续保持服药,不定期运动运动,呼吸新鲜已得到有效控制,请继续保持服药,不定期运动运动,呼吸新鲜空气。</p> -->
      </div>
      <!-- 新版诊断完成样式  status : 03--诊断完成  05--已评价 -->
      <div class="newInit"  v-if="details.status==='03' || details.status==='05'" >
        <div class="msgBox">
          <span class="leftTitle" style="font-size:46rpx;">{{details.patient_name}}</span>
          <span class="rightContent" style="line-height:70rpx;">{{details.sex}} / {{details.regular_age}}岁</span>
        </div>
        <div class="msgBox">
          <span class="leftTitle">就诊科室</span>
          <span class="rightContent">{{details.dept_name}}</span>
        </div>
        <div class="msgBox">
          <span class="leftTitle">就诊时间</span>
          <span class="rightContent" >{{details.jiuzhenTime}}</span>
        </div>
        <div class="msgBox">
          <span class="leftTitle">病情描述</span>
          <span class="rightContent">
            <span class="fontRight">{{details.current_medical_history}}</span>
          </span>
        </div>
        <div class="msgBox">
          <span class="leftTitle" >希望帮助</span>
          <span class="rightContent">
            <span class="fontRight">{{(details.want_help&&details.want_help!==' ')?details.want_help:'暂无'}}</span>
          </span>
        </div>
        <div class="msgBox">
          <span class="leftTitle" >过敏史</span>
          <span class="rightContent" v-if="details.allergy_history && (details.allergy_history.qt || details.allergy_history.swgm || details.allergy_history.ywgm)">
            <span class="fontRight">
              <span v-if="details.allergy_history.swgm">
                <text selectable="true">食物过敏:&nbsp&nbsp;{{details.allergy_history.swgm}}</text>
              </span>
              <span v-if="details.allergy_history.ywgm">
                <text selectable="true">；药物过敏:&nbsp;&nbsp;{{details.allergy_history.ywgm}}</text>
              </span>
              <span v-if="details.allergy_history.qt">
                <text selectable="true">；&nbsp;&nbsp;{{details.allergy_history.qt}}</text>
              </span>
            </span>
          </span>
          <span v-else>无</span>
        </div>
        <div class="msgBox" v-if="details.regular_age*1 > 14" >
          <span class="leftTitle" >婚育史</span>
          <span class="rightContent" v-if="details.obsterical_history.hyzk || details.obsterical_history.syzt">
            <span class="fontRight">
              {{details.obsterical_history.hyzk?details.obsterical_history.hyzk + '、':''}}
              {{details.obsterical_history.syzt?details.obsterical_history.syzt:''}}
            </span>
          </span>
          <span class="rightContent" v-else>无</span>
        </div>
        <div class="msgBox">
          <span class="leftTitle" >家族史</span>
          <span class="rightContent" v-if="details.family_history && (details.family_history.qt || details.family_history.jzs_jsz)">
            <span class="fontRight">
              <span v-if="details.family_history.jzs_jsz">
                <text selectable="true">{{details.family_history.jzs_jsz}}</text>
              </span>
              <span v-if="details.family_history.qt">
                <text selectable="true">,&nbsp;&nbsp;{{details.family_history.qt}}</text>
              </span>
            </span>
          </span>
          <span class="rightContent" v-else>无</span>
        </div>
        <div class="msgBox">
          <span class="leftTitle" >个人习惯</span>
          <span class="rightContent" v-if="details.personal_habits.qt || details.personal_habits.grxg_grxg" >
            <span class="fontRight">
              <span v-if="details.personal_habits.grxg_grxg">
                <text selectable="true">{{details.personal_habits.grxg_grxg}}</text>
              </span>
              <span v-if="details.personal_habits.qt">
                <text selectable="true">；&nbsp;&nbsp;{{details.personal_habits.qt}}</text>
              </span>
            </span>
          </span>
          <span class="rightContent" v-else>无</span>
        </div>
        <div class="imgArea" v-if="details.upload_image.length > 0 && details.upload_image != ''" >
          <div class="imgTitle">附件资料</div>
          <div class="imgBox">
            <img v-for="(item, index) in details.upload_image"  style="width: 148rpx;height: 148rpx;" :key="index" :src="item" alt @click="showImg(item)" />
          </div>
        </div>
        <div class="imgArea msgBox" v-else>
          <span class="leftTitle">附件资料</span>
          <span class="rightContent">无</span>
        </div>
        <div class="msgBox">
          <span class="leftTitle"   >主诉</span>
          <span class="rightContent">
            <span class="fontRight">
            {{(details.patient_condition && details.patient_condition!==' ')?details.patient_condition:'暂无'}}
            </span>
          </span>
        </div>
        <div class="msgBox">
          <span class="leftTitle"   >现病史</span>
          <span class="rightContent">
            <span class="fontRight">{{details.medical_history}}</span>
          </span>
        </div>
        <div class="msgBox">
          <span class="leftTitle"   >既往史</span>
          <span class="rightContent"
            v-if="details.anamnesis.crb || details.anamnesis.jb || details.anamnesis.qt || details.anamnesis.sss"
          >
            <span class="fontRight">
              <span v-if="details.anamnesis.crb">
                  <text selectable="true">传染病史:&nbsp;&nbsp;{{details.anamnesis.crb}}</text>
                </span>
                <span v-if="details.anamnesis.jb">
                  <text selectable="true">；疾病史:&nbsp;&nbsp;{{details.anamnesis.jb}}</text>
                </span>
                <span v-if="details.anamnesis.sss">
                  <text selectable="true">；手术史:&nbsp;&nbsp;{{details.anamnesis.sss}}</text>
                </span>
                <span v-if="details.anamnesis.qt">
                  <text selectable="true">；&nbsp;&nbsp;{{details.anamnesis.qt}}</text>
                </span>
              </span>
            </span>
          <p v-else>无</p>
        </div>
        <div class="msgBox">
          <span class="leftTitle">体检</span>
          <span class="rightContent">
            <span class="fontRight">{{details.physicals}}</span>
          </span>
        </div>
        <div class="msgBox">
          <span class="leftTitle">辅助检查结果</span>
          <span class="rightContent">
            <span class="fontRight">{{details.auxiliary_examination_results}}</span>
          </span>
        </div>
        <div class="msgBox" >
          <span class="leftTitle" >初步诊断</span>
          <span class="rightContent" v-if="details.diagnose_summary_list && details.diagnose_summary_list.length > 0 ">
            <span class="diagnose" v-for="(item,index) in details.diagnose_summary_list" :key="index">{{item}}</span>
          </span>
          <span class="rightContent" v-else>
            无
          </span>
        </div>
        <div class="msgBox imgArea">
          <span class="leftTitle"   >诊疗意见</span>
          <span class="rightContent">
            <span class="fontRight">{{details.treatment_opinion}}</span>
          </span>
        </div>
        <div class="msgBox">
          <span class="leftTitle"   >医生签名</span>
          <span class="rightContent">{{details.doctor_name}}</span>
        </div>
        <div class="msgBox">
          <span class="leftTitle"   >日期</span>
          <span class="rightContent">{{details.signTime}}</span>
        </div>
        <div class="imgArea">
          <div class="imgTitle" style="margin:-20rpx 0 -20rpx 0;">评价内容</div>
          <div  class="rateTitle" v-for="(item, index) in evluList" :key="index">
            <span class="fl">{{item.name}}</span>
            <span class="fr">
              <i-rate
                :value="item.value"
                @change="onChange($event, item)"
                :disabled="details.status == '05'"
              ></i-rate>
            </span>
          </div>
          <div class="rateTitle textBox" >
            <textarea
              v-if="showIpt"
              placeholder="写下您的建议和意见"
              @blur="infoBlur"
              :focus="true"
              disable-default-padding="true"
              placeholder-style="color:#999999;"
              maxlength="100"
              :value="evaluation"
              @input="evaluationChange"
              :adjust-position='true'
              :disabled="details.status == '05'"
            />
            <text :class="['area',{'haveDown':details.status !== '03'}]" v-if="!showIpt" @click="infoBlur">{{evaluation || '写下您的建议和意见'}}</text>
            <div class="limitShow" v-if="details.status === '03'">{{evaluation.length}} / 100 字</div>
          </div>
        </div>
        <div class="post" v-if="details.status === '03'">
          <span class="recode" @click="post">提交</span>
          <img :src="btnBgImg" />
        </div>
        <div class="post" v-if="details.status === '05'">
          <span class="recode" @click="gochat">查看聊天记录</span>
          <img :src="btnBgImg" />
        </div>
      </div>

    </div>

    <!--
      00 待支付
      01 待就诊
      01&&detect_result ==0 未验证 进入云诊间 申请退款
      02 诊断中
      03 诊断完成
      04 未赴约
      05 已评价
      08 未接诊
      20 逾期支付
      30 患者撤销预约
      31 退款中
      32 退款成功
      33 退款失败
    -->
    <!-- 图文、音频    底部按钮//////////////////////////////////////////////////////////////////-->
    <div :class="{bottomDiv: true, ipxPage: ifIphonex}" v-if="  (details.category === '3' || details.category === '4' || details.category === '5') && showBtm && details.status !== '01'">
      <!-- 未支付 -->
      <div v-if="details.status == '00' || details.status == '06'" class="twoBtn">
        <div>
          <span @click="toPayment">立即支付</span>
        </div>
        <div @click="cancelOrder">
          取消预约
        </div>
      </div>
      <!-- 诊断中 -->
      <div v-if=" details.status == '02'" style="height: 100%;">
        <span class="recode" @click="gochat">去交流</span>
        <img :src="btnBgImg" />
      </div>
      <!-- 未接诊中 -->
      <div v-if="  details.status == '08'" style="height: 100%;">
        <span class="recode" @click="chooseDoctor">选择其他时间段</span>
        <img :src="btnBgImg" />
      </div>
    </div>
    <!-- 特殊 -->
    <div :class="{bottomDiv: true, ipxPage: ifIphonex}" v-if="  (details.category === '3' || details.category === '4' || details.category === '5') && showBtm &&(details.status == '01' && ifIphonex)">
     <!-- 待接诊 -->
      <div v-if=" details.status == '01' && ifIphonex" style="height: 100%;">
        <span class="recode" @click="refundMoney">申请退款</span>
        <!-- <span class="recode" @click="queryList">查看预约记录</span> -->
        <img :src="btnBgImg" />
      </div>
    </div>
    <!-- 专科，专家，团队   底部按钮-->
     <div
       :class="{bottomDiv: true, ipxPage: ifIphonex}"
       v-if="(details.category == '0' || details.category === '1' || details.category === '2') && showBtm"
      >
       <!-- 待付款status -->
       <div v-if="details.status == '00'||details.status == '06'" class="twoBtn">
         <div>
           <span @click="toPayment">立即支付</span>
         </div>
         <div @click="cancelOrder">取消预约</div>
       </div>
       <!-- 已下线 -->
       <div v-if=" details.status == '09'&& details.doctor_id" class="twoBtn">
         <div>
           <span @click="chooseOtherTime">选择其他时段</span>
         </div>
         <div @click="refundMoney">申请退款</div>
       </div>
       <div v-if="details.status == '01'&&!details.doctor_id" class="twoBtn">
         <div>
           <span @click="goRoom">进入</span>
         </div>
         <div @click="refundMoney">申请退款</div>
       </div>
       <!--  专家 诊断前 -->
       <div class="twoBtn" v-if="details.status == '01' && details.category == '0'">
            <div>
              <span @click="goRoom">进入云诊间</span>
            </div>
            <div @click="refundMoney">申请退款</div>
        </div>
      <!-- 诊断中 -->
       <div v-if=" details.status == '02'" style="height: 100%;">
         <span class="recode" @click="goRoom">进入云诊间</span>
         <img :src="btnBgImg" />
       </div>
  </div>
    <!-- 申请退款 -->
    <div v-if="visible" class="bg">
      <div class="init">
        <div class="initTop">
          退款原因
          <img :src="closeTipsImg" @click="visible = false" />
        </div>
        <div class="initMid">
          <div style="margin-left: 30rpx;">
            <radio-group @change="changeRadio">
              <radio class="radio" value="0" color="#fff">
                <text class="radioText" >临时有事</text>
                  <span class="coverBox">
                    <img v-if="reason_code == '0'" :src="chooseRadio" />
                    <img  v-else :src="unchooseRadio" >
                  </span>
              </radio>
              <br />
              <radio class="radio" value="1" color="#fff">
                <text class="radioText" >挂错了/多挂了/不想挂</text>
                  <span  class="coverBox">
                    <img v-if="reason_code == '1'" :src="chooseRadio" />
                    <img  v-else :src="unchooseRadio" >
                 </span>
              </radio>
              <br />
              <radio class="radio lastRadio" value="2" color="#fff">
                <text class="radioText" >其他原因</text>
                  <span class="coverBox">
                    <img v-if="reason_code == '2'" :src="chooseRadio" />
                    <img  v-else :src="unchooseRadio" >
                  </span>
              </radio>
              <br />
            </radio-group>
          </div>
          <div class="areaDiv clearfix" v-if="reason_code==2">
            <textarea
              placeholder="请输入原因"
              disable-default-padding="true"
              placeholder-style="color:#CCCCCC"
              maxlength="100"
              :value="reason"
              @input="inputchange"
            />
            <div class="fr" style="color: #CCCCCC; font-size: 30rpx;">{{reason.length}} / 100 字</div>
          </div>
        </div>
        <div class="initBtm" @click="requestRefund">
          <div>提交</div>
        </div>
      </div>
    </div>
    <i-message id="message" />
    <i-toast id="toast" />
  </div>
</template>
<script>
let app = getApp();
import * as types from "@/store/types";
import { mapState } from "vuex";
import nim from "@/utils/nim";
import api from "@/api/api";
const { $Toast, $Message } = require("../../../../../static/iview/base/index");
export default {
  computed: {
    ...mapState(["talkInfo"])
  },
  data() {
    return {
      id: "",
      details: {
        category: "",
        status: "",
        countDown: "",
        quxiaoTime: "",
        tuikuanTime: ""
      },
      chooseRadio: require('../../../../../static/images/chooseRadio.png'),
      unchooseRadio: require('../../../../../static/images/unchooseRadio.png'),
      visible: false,
      showBtm: false,
      reason: "",
      evaluation: "",
      evluList: [
        {
          name: "评价A",
          value: 5
        },
        {
          name: "评价B",
          value: 5
        },
        {
          name: "评价C",
          value: 5
        },
        {
          name: "评价D",
          value: 5
        }
      ],
      timer: null,
      routerKey: null,
      imgUrl: "",
      zhuanjiaImg: "",
      zhuankeImg: "",
      tuanduiImg: "",
      tuwenImg: "",
      yinpingImg: "",
      medicalImg: require('../../../../../static/images/medical.png'),
      btnBgImg: "",
      closeTipsImg: "",
      showIpt: false,
      reason_code: "",
      isIp:false,
      payTimeInterval:"",
      isback: true,
      isShortScreen: false,
      clickedRefund: false
    };
  },
  computed: {
    ...mapState([
      'ifIphonex', 'talkInfo'
    ])
  },
  onLoad(option) {
    Object.assign(this.$data, this.$options.data())
    let that = this;
    that.id = option.aptId;
    that.routerKey = option.key;
    that.reason = ''
    nim.reconnection();
    clearInterval(that.timer)
    that.timer = null
    mpvue.getSystemInfo({
    success: function (res) {
      console.log(res,'系统信息',res.model === 'HUAWEI MLA-AL10')
      var model = res.model
      if (model.screenHeight*1 < 568 || model === 'HUAWEI MLA-AL10') {  //兼容HUAWEI MLA-AL10
        that.isShortScreen = true
      }
      if (model.search('iPhone') != -1) {
        that.isIp = true;
      } else {
        that.isIp = false;
      }
    }
  })
  },
  onShow() {
    this.id = this.talkInfo.apt_id;
    this.imgUrl = api.imgUrl;
    this.zhuanjiaImg = this.imgUrl + "zhuanjia.png";
    this.zhuankeImg = this.imgUrl + "zhuanke.png";
    this.tuanduiImg = this.imgUrl + "tuandui.png";
    this.tuwenImg = this.imgUrl + "tuwen.png";
    this.yinpingImg = this.imgUrl + "yinping.png";
    this.btnBgImg = this.imgUrl + "btnBg.png";
    this.closeTipsImg = this.imgUrl + "closeTips.png";
    this.queryDetails();
    (this.evluList = [
      {
        name: "服务态度",
        value: 5
      },
      {
        name: "诊疗技术",
        value: 5
      },
      {
        name: "主观疗效",
        value: 5
      },
    ]),
      (this.evaluation = "");
  },
  methods: {
    infoBlur() {
      this.showIpt = !this.showIpt;
      if (this.showIpt && !this.isIp) {
        wx.pageScrollTo({
          scrollTop: 1000,
          duration: 300,
          success: function (res) {
            console.log(res,'页面滚动')
          }
        })
      }
    },
    post() {
      let that = this;
      let obj = {
        apt_id: that.details.apt_id,
        doctor_id: that.details.doctor_id,
        a_stars: that.evluList[0].value,
        b_stars: that.evluList[1].value,
        c_stars: that.evluList[2].value,
        content: that.evaluation
      };
      if (obj.content.trim() === "") {
        obj.content = "无";
      }
      that.$api.commentSave(obj, { showLoading: false }).then(res => {
        $Message({
          content: "提交成功",
          type: "success"
        });
        this.queryDetails();
        window.scrollTo(0, 0);
      });
    },
    onChange(e, item) {
      let index = e.mp.detail.index;
      item.value = index;
    },
    // 查看图片
    showImg(item) {
      let arr = [];
      for (let i = 0; i < this.details.upload_image.length; i++) {
        arr.push(this.details.upload_image[i]);
      }
      console.log(arr);
      mpvue.offAppHide()
      mpvue.previewImage({
        current: item, // 当前显示图片的http链接
        urls: arr // 需要预览的图片http链接列表
      });
    },
    // 修改退款原因
    changeRadio(e) {
      console.log(e.mp.detail.value);
      this.reason_code = e.mp.detail.value;
    },
    // 文本框改变
    evaluationChange(e) {
      let stringStr = e.target.value.substring(0, 1);
      this.evaluation = e.target.value;
      if (stringStr == " ") {
        this.evaluation = this.evaluation.substring(1, this.evaluation.length);
      }
      if(this.evaluation.length > 100) {
        this.evaluation = this.evaluation.substring(0, 100);
      }
    },
    // 文本框改变
    inputchange(e) {
      let stringStr = e.target.value.substring(0, 1);
      this.reason = e.target.value;
      if (stringStr == " ") {
        this.reason = this.reason.substring(1, this.reason.length);
      }
    },
    //进入云诊间
    goRoom() {
      this.$router.push(`/pages/subPage/register/consultationRoom/main?apt_id=${this.details.apt_id}`);
    },
    //取消预约
    cancelOrder() {
      var that = this;
      // isCancle
      that.$api
        .isCancle({ apt_id: that.id }, { showLoading: false })
        .then(res => {
          if (res.code == 0) {
            $Toast({
              content: "取消成功",
              type: "success"
            });
            that.queryDetails();
          } else {
            $Toast({
              content: "取消失败",
              type: "warning"
            });
          }
        });
    },
    // 申请退款
    refundMoney() {
      this.reason = "";
      this.visible = true;
    },
    //确定退款
    requestRefund() {
      var that = this;
      if(!that.reason_code || that.reason_code == '') {
        $Toast({
          content: "请选择退款原因",
          type: "warning"
        });
        return
      }
      let data = {
        apt_id: that.id,
        cancel_reason_code: that.reason_code,
        reason_text: that.reason
      };
      that.$api.requestRefund(data, { showLoading: true }).then(res => {
        if (res.code == 0) {
          $Toast({
            content: "退款申请成功",
            type: "success"
          });
          that.visible = false
          that.queryDetails();
          window.scrollTo(0,0)
        } else {
          $Toast({
            content: "退款申请失败",
            type: "warning"
          });
        }
      });
    },
    //支付
    toPayment () {
      console.log(this.details)
      if(this.details.pay_value == 0) {  // 支付金额为0
        that.$api
          .appointmentPayResultGet(
            { order_id: that.details.order_id },
            { showLoading: false }
          )
          .then(temp => {
            if (temp.data.pay_status == true) {
              // wx.hideLoading();

              clearInterval(that.payTimeInterval);
              that.payTimeInterval = null;
              that.$utils.showToast('text', '支付成功')
              // let data = JSON.stringify(that.details)
              let obj = {
                apt_id: that.details.apt_id
              }
              let data = JSON.stringify(obj)
              that.$router.replace(`/pages/subPage/register/registerSuccess/main?data=${data}`)
              return;
            }
            if (index >= 4) {
              if (temp.data.pay_status == true) {
                // wx.hideLoading();

                clearInterval(that.payTimeInterval);
                that.payTimeInterval = null;
                that.$utils.showToast('text', '支付成功')
                // let data = JSON.stringify(that.details)
                let obj = {
                  apt_id: that.details.apt_id
                }
                let data = JSON.stringify(obj)
                that.$router.replace(`/pages/subPage/register/registerSuccess/main?data=${data}`)
                return;
              } else {
                wx.hideLoading();

                clearInterval(that.payTimeInterval);
                that.payTimeInterval = null;
                that.$utils.showToast('text', '支付失败')
                return;
              }
            }
          });
      }
        this.$api.orderPayWechatMini({order_id: this.details.order_id}, ({'showLoading': true})).then(res => {
          let that = this
          wx.requestPayment({
            timeStamp: res.data.signMp.timeStamp,
            nonceStr: res.data.signMp.nonceStr,
            package: res.data.signMp.package,
            signType: res.data.signMp.signType,
            paySign: res.data.signMp.sign,
            success (res) {

              mpvue.showLoading({
                title: "加载中...",
                mask: true
              });
              var index = 0;
              function circleQuery(index) {
                  that.$api
                  .appointmentPayResultGet(
                    { order_id: that.details.order_id },
                    { showLoading: false }
                  )
                  .then(temp => {
                    if (temp.data.pay_status == true) {
                      // wx.hideLoading();

                      clearInterval(that.payTimeInterval);
                      that.payTimeInterval = null;
                      that.$utils.showToast('text', '支付成功')
                      // let data = JSON.stringify(that.details)
                      let obj = {
                        apt_id: that.details.apt_id
                      }
                      let data = JSON.stringify(obj)
                      that.$router.replace(`/pages/subPage/register/registerSuccess/main?data=${data}`)
                      return;
                    }
                    if (index >= 4) {
                      if (temp.data.pay_status == true) {
                        // wx.hideLoading();

                        clearInterval(that.payTimeInterval);
                        that.payTimeInterval = null;
                        that.$utils.showToast('text', '支付成功')
                        // let data = JSON.stringify(that.details)
                        let obj = {
                          apt_id: that.details.apt_id
                        }
                        let data = JSON.stringify(obj)
                        that.$router.replace(`/pages/subPage/register/registerSuccess/main?data=${data}`)
                        return;
                      } else {
                        wx.hideLoading();

                        clearInterval(that.payTimeInterval);
                        that.payTimeInterval = null;
                        that.$utils.showToast('text', '支付失败')
                        return;
                      }
                    }
                    index++;
                    setTimeout(() => {
                      circleQuery(index)
                    }, 1000);

                  });
                }
                circleQuery(index)
            },
            fail (res) {
               // 递归  查询支付状态
                console.log('走失败')
                wx.showLoading({
                  title: "加载中...",
                  mask: true
                });
                let tip = "支付失败";
                var index = 0;
                function circleQuery(index) {
                  that.$api
                  .appointmentPayResultGet(
                    { order_id: that.details.order_id },
                    { showLoading: false }
                  )
                  .then(temp => {
                    if (temp.data.pay_status == true) {
                      // wx.hideLoading();

                      clearInterval(that.payTimeInterval);
                      that.payTimeInterval = null;
                      that.$utils.showToast('text', '支付成功')
                      // let data = JSON.stringify(that.details)
                      let obj = {
                        apt_id: that.details.apt_id
                      }
                      let data = JSON.stringify(obj)
                      that.$router.replace(`/pages/subPage/register/registerSuccess/main?data=${data}`)
                      return;
                    }
                    if (index > 4) {
                      if (temp.data.pay_status == true) {
                        // wx.hideLoading();

                        clearInterval(that.payTimeInterval);
                        that.payTimeInterval = null;
                        that.$utils.showToast('text', '支付成功')
                        // let data = JSON.stringify(that.details)
                        let obj = {
                          apt_id: that.details.apt_id
                        }
                        let data = JSON.stringify(obj)
                        that.$router.replace(`/pages/subPage/register/registerSuccess/main?data=${data}`)
                        return;
                      } else {
                        wx.hideLoading();

                        clearInterval(that.payTimeInterval);
                        that.payTimeInterval = null;
                        that.$utils.showToast('text', '支付失败')
                        return;
                      }
                    }
                    index++;
                    setTimeout(() => {
                      circleQuery(index)
                    }, 1000);

                  });
                }
                circleQuery(index)
            }
          })

        })
      },
    // 查看详情
    queryDetails() {
      let that = this;
      clearInterval(that.timer);
      that.showBtm = false;
      that.$api
        .appointmentDetail({ apt_id: that.id }, { showLoading: true })
        .then(res => {
          let obj = that.talkInfo;
          obj.status = res.data[0].status;
          obj.doctorImg = res.data[0].doctor_image;
          obj.diagnose_time = res.data[0].diagnose_time;
          that.$store.commit(that.$types.TALK_INFO, obj);
          that.details = res.data[0];
          that.details.physicals = that.details.physicals && that.details.physicals != 'null' ? that.details.physicals : '无'
          that.details.auxiliary_examination_results = that.details.auxiliary_examination_results && that.details.auxiliary_examination_results != 'null' ? that.details.auxiliary_examination_results : '无'
          that.details.current_medical_history = that.details.current_medical_history && that.details.current_medical_history != 'null' ? that.details.current_medical_history : '无'
          that.details.patient_condition = that.details.patient_condition && that.details.patient_condition != 'null' ? that.details.patient_condition : '无'
          that.details.medical_history = that.details.medical_history && that.details.medical_history != 'null' ? that.details.medical_history : '无'
          that.details.diagnose_summary = that.details.diagnose_summary && that.details.diagnose_summary != 'null' ? that.details.diagnose_summary : '无'
          that.details.yuyueTime = that.details.apt_time
            ? that.$utils.filterTime(that.details.apt_time, 1)
            : "";
          that.details.jiuzhenTime = that.details.apt_diagnose_time
            ? that.$utils.filterTime(that.details.apt_diagnose_time, 1)
            : "";
          that.details.signTime = that.details.signature_time
            ? that.$utils.filterTime(that.details.signature_time, 1)
            : "";
          that.details.apt_begin_time = that.details.apt_begin_time
            ? that.$utils.filterTime(that.details.apt_begin_time, 1).split(' ')[0] + ' ' +
             that.$utils.filterTime(that.details.apt_begin_time, 1).split(' ')[1].split(':')[0] + ':' +
              that.$utils.filterTime(that.details.apt_begin_time, 1).split(' ')[1].split(':')[1]
            : "";
          that.details.apt_end_time = that.details.apt_end_time
            ? that.$utils.filterTime(that.details.apt_end_time, 1).split(' ')[1].split(':')[0] + ':' + that.$utils.filterTime(that.details.apt_end_time, 1).split(' ')[1].split(':')[1]
            : "";
          if (res.data[0].status === "05") {
            that.evluList = [
              {
                name: "服务态度",
                value: that.details.a_stars
              },
              {
                name: "诊疗技术",
                value: that.details.b_stars
              },
              {
                name: "主观疗效",
                value: that.details.c_stars
              },
            ];
            that.evaluation = res.data[0].content.split(/\\n/).join('\n');
            if (this.details.if_go_to_hospital == 1) {
              this.isback = true;
            } else if(this.details.if_go_to_hospital == 0) {
              this.isback = false;
          }
          }
          if (
              that.details.category === "0" ||
             that.details.category === "1" ||
             that.details.category === "5" ||
            that.details.category === "2" ||
            that.details.category === "3" ||
            that.details.category === "4" ||
            that.details.category === "31" ||
            that.details.category === "32" ||
            that.details.category === "33"
          ) {
            if (that.details.status == "20") {
              that.showBtm = false;
            } else if (
              that.details.status == "00" ||
              that.details.status == "01" ||
              that.details.status == "02" ||
              that.details.status == "08" ||
              that.details.status == "09"
            ) {
              that.showBtm = true;
            }
          }
          if (that.details.status == "00" || that.details.status == "06") {
            that.showBtm = true;
            let t = that.details.overdue_time * 1000 - new Date().getTime();
            console.log('tt',t);
            that.$set(that.details, "countDown", that.$utils.countDown(t));
            console.log('countDown',that.details)
            that.timer = setInterval(function() {
              t -= 1000;
              if (t > 0) {
                that.$set(that.details, "countDown", that.$utils.countDown(t));
              } else {
                clearInterval(that.timer);
                console.log("支付已过期");
              }
            }, 1000);

          }
          if (that.details.status === "30") {
            that.$set(
              that.details,
              "quxiaoTime",
              that.$utils.filterTime(that.details.cancel_time, 4)
            );
          }
          if (
            that.details.status === "31" ||
            that.details.status === "32" ||
            that.details.status === "33"
          ) {
            that.$set(
              that.details,
              "tuikuanTime",
              that.$utils.filterTime(that.details.request_time, 4).replace(' ',' ')
            );
          }
          that.details.pay_value = String(that.details.pay_value);
          for (var i in that.details) {
            if ((that.details[i] == "" || that.details[i] == null) && i!=='diagnose_summary_list' && i!=='upload_image' ) {
              that.details[i] = " ";
            }
          }
          // console.log(" that.showBtm ", that.showBtm);
        });
    },
    // 查看预约记录
    queryList() {
      let pageList = getCurrentPages();
      if (
        pageList[pageList.length - 2].route ===
        "pages/center/child/appointmentRecord/main"
      ) {
        this.$storage.setNowAppointType('2')
        mpvue.navigateBack(1);
        // this.$router.replace(`/pages/center/child/appointmentRecord/main`)
      } else {
        this.$router.push(
          `/pages/center/child/appointmentRecord/main?key=${2}`
        );
      }
    },
    // 去交流
    gochat() {
      let that = this;

      // 音频
      if (that.details.category === "4" || that.details.category === '5') {
        if(that.details.chat_type=='1') {
          // that.$router.push( `/pages/chat/child/graphicChat/main?hadAudio=true`);
          that.$router.push( `/pages/chat/child/leaveMsg/main?hadAudio=true&apt_id=${that.talkInfo.apt_id}&category=${that.details.category}`);
        } else {
           that.$router.push( `/pages/chat/child/graphicChat/main?hadAudio=true`);
        }
      } else {
        // 图文
        if (that.details.chat_type=='1') {
          that.$router.push(`/pages/chat/child/leaveMsg/main?apt_id=${that.talkInfo.apt_id}`);
        } else {
          that.$router.push(`/pages/chat/child/graphicChat/main`);
        }
      }

      return

      that.$api
        .appointmentDetail(
          { apt_id: that.talkInfo.apt_id },
          { showLoading: false }
        )
        .then(res => {
          let obj = that.talkInfo;
          obj.status = res.data[0].status;
          (obj.category = res.data[0].category),
            (obj.regular_id = res.data[0].regular_id),
            (obj.doctor_name = res.data[0].doctor_name),
            (obj.netease_id = res.data[0].netease_id),
            (obj.sessionId = "p2p-" + res.data[0].netease_id),
            (obj.time_type = res.data[0].time_type)
            that.$store.commit(that.$types.TALK_INFO, obj);
          console.log(that.talkInfo, "talkInfo");
          nim.reconnection();
          nim.resetSessionUnread(obj.sessionId); // 会话列表有该id信息才重置
          // 音频
          if (that.details.category === "4" || details.category === '5') {
            that.$router.push( `/pages/chat/child/leaveMsg/main?hadAudio=true`);
            // that.$router.push( `/pages/chat/child/graphicChat/main?hadAudio=true`);
          } else {
            // 图文
            // that.$router.push(`/pages/chat/child/graphicChat/main`);
            that.$router.push(`/pages/chat/child/leaveMsg/main`);
          }
          return;
        });
    },
    // 立即支付
    pay() {
      this.$set(this.details, "status", "01");
    },
    // 取消订单
    cancleOder() {
      this.$set(this.details, "status", "30");
    },
    // 选择其他医生
    chooseDoctor() {
      if(this.details.category_str=='图文问诊' || this.details.category_str=='音频问诊'){
      this.$router.push(`/pages/subPage/register/dept/main?video=1`);
      }else if(this.details.category_str=='视频问诊'){
      this.$router.push(`/pages/subPage/register/dept/main?video=0`);
      }
    },
    // 选择其他时间段
    chooseOtherTime () {
      let doctor_id = this.details.doctor_id
        // 判断一周内是否有该医生排班
      this.$api.haveArrangeByWeek({doctor_id:doctor_id},{ showLoading: false }).then(res=>{
        // 这周有排班 并且是当前医生
        if (res.data.arrange_day !== null && res.data.current_doctor) {
          let param = {
            begin_arrange_day: res.data.arrange_day,
            end_arrange_day: res.data.arrange_day
          }
          this.$api.getDoctorList(param, { showLoading: true }).then((res) => {
            res.data.forEach((ele,index)=>{
              if (ele.doctor_id === doctor_id) {
                this.$router.push(
                  `/pages/subPage/register/doctorInfo/main?doctorInfo=${JSON.stringify(ele)}&key=${ele.arrange_day}&isChange=true&apt_id=${this.details.apt_id}`
                );
              }
            })
          })
          return
        }
        this.$router.push(`/pages/subPage/register/dept/main?video=0&specilist=1&doctor_id=${this.details.doctor_id}`);
      })
    },
  },
  onUnload() {
    let that = this;
    clearInterval(that.timer);
    that.timer = null;
    // console.log(that.routerKey)
    if (that.routerKey) {
      wx.redirectTo({
        url: "/pages/center/child/appointmentRecord/main"
      });
      // that.$router.replace(`/pages/center/child/appointmentRecord/main`)
    }
  }
};
</script>
<style scoped lang='less'>
.scroll {
  overflow-y: auto;
}
.shortScreen {
  height: 100% !important;
}
.outDiv {
  font-family: PingFangSC-Regular, PingFang SC;
  width: 100%;
  height: 100%;
  // overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  .topDiv {
    flex: 1;
    display: flex;
    flex-direction: column;
    .code {
      height: 90rpx;
      line-height: 90rpx;
      padding: 0 30rpx;
      background: rgba(249, 249, 249, 1);
      font-size: 30rpx;
      .type {
        color: rgba(102, 102, 102, 1);
      }

      img {
        width: 44rpx;
        height: 44rpx;
        margin: 24rpx 7rpx 0 0;
      }
    }
    .feedback {
      padding: 0 30rpx;
      border-bottom: 1rpx solid #E9E9E9;
      span {
        display: block;
        width: 170rpx;
        height: 70rpx;
        // background:linear-gradient(135deg,rgba(85,125,245,1) 0%,rgba(64,76,223,1) 100%);
        border-radius: 16rpx;
        margin: 20rpx 0 5rpx 0;
        line-height: 70rpx;
        border-radius: 10rpx;
        // color: #fff;
        color: #4a71e8;
        font-size: 34rpx;
        font-weight: 700;
      }
      p {
        color: #4a71e8;
        padding-bottom: 37rpx;
        font-size: 32rpx;
      }
    }
    .init {
      flex: 1;
      // overflow-y: auto;
      background: #fff;
      font-size: 36rpx;
      // overflow-y: scroll;
      .initTop {
        height: 70rpx;
        line-height: 70rpx;
        margin: 0rpx 35rpx 40rpx 60rpx;
        font-size: 36rpx;
        padding-top: 40rpx;
        border-top: 1rpx solid #e9e9e9;
        .name {
          font-size: 50rpx;
          font-weight: bold;
        }
      }
      .areaDiv {
        border-top: 1rpx solid #e9e9e9;
        padding: 30rpx 0;
        margin: 0 60rpx;
        font-size: 36rpx;
        color: #333;
        .lineTitle {
          font-size: 36rpx;
          height: 50rpx;
          line-height: 50rpx;
          margin-bottom: 10rpx;
        }
        .line {
          display: inline-block;
          width: 180rpx;
          font-weight: 300;
          color: rgba(102, 102, 102, 1);
          line-height: 60rpx;
        }
        .monry {
          color: #ff5453;
        }
        .twoBtn {
          height: 100%;
          margin: 0 30rpx;
          display: flex;
          div {
            flex: 1;
            text-align: center;
            position: relative;
            font-size: 36rpx;
          }
          div:nth-child(1) {
            background: #4a67eb;
            color: #fff;
            height: 100rpx;
            line-height: 100rpx;
            margin: 20rpx 0 0 0;
            border-radius: 2px;
          }
          div:nth-child(2) {
            color: #fff;
            height: 100rpx;
            line-height: 100rpx;
            border-radius: 2px;
            border: 1rpx solid rgba(204, 204, 204, 1);
            margin-top: 20rpx;
            margin-left: 30rpx;
            color: #666666;
          }
        }
      }
    }
  }
  .bottomDiv {
    position: relative;
    height: 140rpx;
    overflow: hidden;
    .recode {
      position: absolute;
      width: 100%;
      text-align: center;
      line-height: 50rpx;
      margin-top: 35rpx;
      color: #fff;
      font-size: 36rpx;
    }
    img {
      height: 100%;
      width: 100%;
    }
    .btn {
      height: 100%;
      margin: 0 30rpx;
      width: 100%;
    }
    .twoBtn {
      height: 100%;
      margin: 0 30rpx;
      display: flex;
      div {
        flex: 1;
        text-align: center;
        position: relative;
        font-size: 36rpx;
      }
      div:nth-child(1) {
        background: #4a67eb;
        color: #fff;
        height: 100rpx;
        line-height: 100rpx;
        margin: 20rpx 0 0 0;
        border-radius: 2px;
      }
      div:nth-child(2) {
        color: #fff;
        height: 100rpx;
        line-height: 100rpx;
        border-radius: 2px;
        border: 1rpx solid rgba(204, 204, 204, 1);
        margin-top: 20rpx;
        margin-left: 30rpx;
        color: #666666;
      }
    }
  }
}
.hidden {
  overflow: hidden;
}
.xiegang {
  display: inline-block;
  color: #cccccc;
  margin: 0 10rpx;
}
.btmTips {
  font-size: 36rpx;
  line-height: 50rpx;
  margin: 0 60rpx;
  border-top: 1rpx solid #e9e9e9;
  p:nth-child(1) {
    display: inline-block;
    margin: 30rpx 0 10rpx 0;
  }
  p:nth-child(2) {
    font-size: 30rpx;
  }
  .p2 {
    font-size: 36rpx !important;
    color: #666666;
    line-height: 60rpx;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #e9e9e9;
  }
  .fontGray {
    font-size: 36rpx !important;
    color: #666666;
    line-height: 60rpx;
    padding-bottom: 30rpx;
    margin-top: 5px;
  }
  .p3 {
    margin-top: 30rpx;
    margin-bottom: 7rpx;
    span:nth-child(1) {
      color: #666666;
    }
    span:nth-child(2) {
      color: #333333;
    }
  }
  .p4 {
    font-size: 36rpx !important;
    color: #666666;
    span:nth-child(2) {
      color: #333;
    }
  }
  .p5 {
    display: flex;
    color: #666666;
    span:nth-child(2) {
      display: inline-block;
      flex: 1;
      color: #4a71e8;
    }
  }
}
.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  .init {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 660rpx;
    overflow: hidden;
    background: #fff;
    z-index: 2;
    display: flex;
    flex-direction: column;
    .initTop {
      height: 90rpx;
      line-height: 90rpx;
      font-size: 34rpx;
      font-weight: bold;
      text-align: center;
      position: relative;
      border-bottom: 2rpx solid #e9e9e9;
      img {
        width: 45rpx;
        height: 45rpx;
        position: absolute;
        top: 26rpx;
        right: 20rpx;
      }
    }
    .initMid {
      flex: 1;
      .areaDiv {
        border-top: 1rpx solid #e9e9e9;
        border-bottom: 1rpx solid #e9e9e9;
        height: 110rpx;
        padding: 25rpx 30rpx;
      }
      .radio {
        margin-top: 30rpx;
        position: relative;
        // opacity: 0;
      }
      .radioText {
        margin-left: 8rpx;
      }
      .coverBox {
        position: absolute;
        left: 0;
        top: 0;
        // border: 1px solid black;
        background: #fff;
        height: 100%;
        width: 30px;
        img {
          left: 2px;
          position: absolute;
          top: 54%;
          transform: translateY(-50%);
          width: 36rpx;
          height: 36rpx;
        }
      }
      .grayBorder {
        border: 2rpx solid #CCCCCC!important;
      }
      .lastRadio {
        margin-bottom: 30rpx;
      }
      textarea {
        height: 80rpx;
        width: 100%;
      }
    }
    .initBtm {
      height: 160rpx;
      padding: 0rpx 45rpx 0 45rpx;
      div {
        margin-top: 20rpx;
        width: 100%;
        height: 100rpx;
        line-height: 90rpx;
        background: #4a64ea;
        border-radius: 46px;
        text-align: center;
        font-size: 32rpx;
        color: #fff;
        font-weight: bold;
      }
    }
  }
}
.history {
  margin: 0 60rpx 0 60rpx;
  border-top: 1rpx solid #e9e9e9;
  border-bottom: 1rpx solid #e9e9e9;
  padding-top: 30rpx;
  .itemDiv {
    margin-bottom: 30rpx;
    font-size: 36rpx;
    line-height: 50rpx;
    color: #333;
    .blockClass {
      font-size: 32rpx !important;
      span {
        display: block;
      }
    }
    .titleP {
      font-weight: bold;
      display: inline-block;
      margin-bottom: 10rpx;
    }
    img {
      width: 148rpx;
      height: 148rpx;
      margin-right: 26rpx;
      padding: 6rpx;
      border: 1rpx solid #dddddd;
      border-radius: 2rpx;
    }
  }
}
.suggest {
  margin: 0 60rpx 0 60rpx;
  font-size: 36rpx;
  line-height: 50rpx;
  color: #333;
  .itemDiv {
    margin-top: 30rpx;
    padding-bottom: 30rpx;
  }
  .titleP {
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10rpx;
  }
  .bor {
    border-bottom: 1rpx solid #e9e9e9;
  }
}
.evaluation {
  margin-bottom: 10rpx;
}
.tionArea {
  margin-top: 20rpx;
  font-size: 30rpx !important;
  line-height: 1;
  border: 1rpx solid #dddddd;
  padding: 20rpx 24rpx;
  height: 200rpx;
  color: #999999;
  textarea {
    display: block;
    height: 170rpx;
    width: 100%;
  }
  .area {
    display: block;
    height: 170rpx;
    overflow-y: scroll;
    word-break: break-all;
    width: 100%;
    color: #999999;
  }
}
.post {
  position: relative;
  height: 150rpx;
  img {
    width: 100%;
    height: 100%;
  }
  .recode {
    position: absolute;
    width: 100%;
    text-align: center;
    height: 50rpx;
    // line-height: 50rpx;
    transform: translateY(70%);
    color: #fff;
    font-size: 36rpx;
  }
}

// 新版诊断完成信息样式
.newInit {
  flex: 1;
  background: #fff;
  font-size: 36rpx;
  width: 100%;
  .msgBox {
    // min-height: 100rpx;
    display: flex;
    box-sizing: border-box;
    border-bottom: 1rpx solid #e9e9e9;
    padding: 29rpx 30rpx;
    color: #333333;
    font-size: 32rpx;
    // line-height: 100rpx;
    .leftTitle {
      font-weight: bold;
      width: 192rpx;
      // background: skyblue;
    }
    .rightContent {
      flex: 1;
      // background: pink;
      overflow: hidden;
      text-align: right;
      .fontRight {
        float: right;
        text-align: left;
      }
      .diagnose {
        display: inline-block;
        height: 70rpx;
        padding: 0 10rpx;
        text-align: center;
        line-height: 70rpx;
        color: #4a64ea;
        background: #f1f3ff;
        border-radius: 5rpx;
        border: 2rpx solid #99a9f9;
        margin-left: 28rpx;
        margin-bottom: 10rpx;
      }
    }
  }
  .imgArea {
    border-bottom: 16rpx solid #f9f9f9;
    padding: 20rpx 30rpx;
    .imgTitle {
      display: block;
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      min-height: 100rpx;
      line-height: 100rpx;
    }
    .rateTitle {
      display: block;
      // font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      min-height: 60rpx;
      line-height: 60rpx;
      overflow: hidden;
      padding: 5rpx;
      textarea {
        height: 170rpx;
        width: 100%;
        padding: 5rpx;
        box-sizing: border-box;
      }
      .limitShow {
        color: #cccccc;
        font-size: 30rpx;
        text-align: right;
        margin-bottom: 10rpx;
      }
      .area {
        display: block;
        height: 170rpx;
        width: 100%;
        color: #999999;
        overflow-y: scroll;
    word-break: break-all;
      }
      .haveDown {
        color: #333333;
      }
    }
    .textBox {
      margin-top: 20rpx;
      min-height: 220rpx;
      border: 1rpx solid #dddddd;
      padding: 0 20rpx;
    }
    .imgBox {
      img {
        width: 148rpx;
        height: 148rpx;
        margin-right: 27rpx;
      }
      img:nth-child(4n + 0) {
        margin-right: 0rpx;
      }
    }
  }
}
</style>
